<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>订单详情-订单总览-订单详情</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <style>
        .dd-info p select {
            width: 250px;
            border: 1px solid #d3d3d3;
            outline: none;
            height: 25px;
        }
    </style>

    <!-- content starts -->
    <blockquote class="layui-elem-quote">订单详情
        <div class="layui-inline">
            <button type="button" id="print_btn" class="layui-btn layui-btn-primary layui-btn-sm">打印订单</button>
            <a th:href="@{/xhs/order_list(shopId=${shop.getId()})}">返回列表</a>
        </div>
    </blockquote>

    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper" id="myElementId">


        <div class="dd-info">
            <p class="mb"><i>订单号:</i>
                <strong th:text="${orderVo.getOrderId()}"></strong>
            </p>
        </div>
        <div class="dd-info">
            <p class="mb">
                <i>订单状态：</i>
                <strong th:text="${T(com.b2c.entity.enums.EnumXhsOrderStatus).getStatusName(orderVo.getOrderStatus())}">订单状态：</strong>
            </p>
        </div>
        <div class="dd-info">
            <p class="mb">
                <i>卖家备注：</i>
                <strong th:text="${orderVo.getSellerRemark()}"></strong>
            </p>
        </div>
        <div class="dd-info">
            <p class="mb">
                <i>买家留言：</i>
                <b th:text="${orderVo.getCustomerRemark()}"></b>
            </p>
        </div>
        <div class="dd-info">
            <p class="mb">
                <i>下单时间：</i>
                <strong th:text="${#dates.format(orderVo.createdTime , 'yyyy-MM-dd HH:mm:ss')}"></strong>
            </p>
        </div>
        <div class="dd-info">
            <p class="mb">
                <i>最迟发货时间：</i>
                <b th:text="${#dates.format(orderVo.promiseLastDeliveryTime , 'yyyy-MM-dd HH:mm:ss')}"></b>
            </p>
        </div>
        <div class="dd-info">
            <p class="mb">
                <i>收件人：</i>
                <strong th:text="${orderVo.getReceiver()}"></strong>
                <strong th:text="${orderVo.getPhone()}"></strong>
            </p>
        </div>
        <div class="dd-info">
            <p class="mb">
                <i>收件地址：</i>
                <strong th:text="${orderVo.getProvince()}"></strong>
                <strong th:text="${orderVo.getCity()}"></strong>
                <strong th:text="${orderVo.getDistrict()}"></strong>
                <strong th:text="${orderVo.getAddress()}"></strong>
            </p>
        </div>
        <div class="dd-info">
            <a href="javascript:;"  style="float:right;margin:10px;" id="add_gift" class="layui-btn layui-btn-normal layui-btn-xs" th:attr="order_id=${orderVo.getId()}">添加赠品<p><span></span></p></a>
        </div>
        <table class="dd-table">
            <tr>
                <th>商品</th>
                <th>规格</th>
                <th>SKU</th>
                <th>数量</th>
                <th>支付金额</th>
                <th></th>
            </tr>
            <tr th:each="item:${orderVo.getItems()}">
                <td>
                    <div><img th:src="${item.getItemImage()}">
                        <p th:text="${item.getItemName()}"></p>
                        <p th:if="${item.itemTag == 1}"><span class="layui-badge">赠品</span></p>
                    </div>
                </td>
                <td th:text="${item.getItemSpec()}"></td>
                <td th:text="${item.getErpCode()}"></td>
                <td th:text="${item.getQuantity()}"></td>
                <td th:text="${#numbers.formatDecimal(new java.math.BigDecimal(item.getTotalPaidAmount()).divide(100), 0, 2)}"></td>

                <td>

                </td>
            </tr>
        </table>
        <div class="dd-info">
            <p><span>订单总金额：<b th:text="${'¥'+#numbers.formatDecimal(new java.math.BigDecimal(orderVo.getTotalPayAmount()).divide(100), 0, 2)}"></b></span></p>
            <p><span>运费：<b th:text="${'¥'+orderVo.getTotalShippingFree()}"></b></span></p>
        </div>

    </div>
    <div class="dd-info">
        <a th:if="${orderVo.getOrderStatus()==4}" href="javascript:;" style="background:#39c;color:#fff;float:right;margin:10px;" class="layui-btn confirm" th:attr="order_id=${orderVo.getOrderId()}">确认订单<p><span></span></p></a>
    </div>
    <!-- end dd-wrapper -->
    <script type="text/template" id="edit_good_sku">
        <div class="T-box">
            <form method="post">
                <p id="new_good_sku"></p>
            </form>
        </div>
    </script>

    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/jQuery.print.min.js"></script>
    <script>
        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
            var laydate = layui.laydate;
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            laydate.render({
                elem: '#startTime'
            });
            laydate.render({
                elem: '#endTime'
            });


            $(function () {
                $("#print_btn").click(function () {
                    $.print("#myElementId" /*, options*/);
                })

                //变更商品
                $(".upd_goods").click(function () {
                    var $this = $(this);
                    var orderItemId =  $this.attr("d_item_id");
                    var shopId = '[[${shop.id}]]';
                    //确认订单iframe层
                    layer.open({
                        type: 2,
                        title: '补充商品信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['1100px', '650px'],
                        content: '/douyin/upd_order_item_goods?orderItemId=' + orderItemId +"&shopId="+shopId //iframe的url
                    });

                })
                //添加赠品
                $("#add_gift").click(function () {
                    var $this = $(this);
                    var orderId = $this.attr("order_id");
                    var shopId = $(this).attr("shop-id");
                    //确认订单iframe层
                    layer.open({
                        type: 2,
                        title: '添加订单赠品',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['1100px', '650px'],
                        content: '/order/add_gift?orderId=' + orderId+'&shopId='+ shopId //iframe的url
                    });

                })

                //确认订单
                $(".confirm").click(function () {
                    var orderId = $(this).attr("order_id");
                    //确认订单iframe层
                    layer.open({
                        type: 2,
                        title: '订单确认',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['480px', '650px'],
                        content: '/douyin/order_confirm?orderId=' + orderId //iframe的url
                    });
                });

                //修改规格
                $('.edit_good').click(function () {
                    var $this = $(this);
                    var data = {goodNumber: $this.attr('d_goodNum')}
                    Tips.alert({
                        title: '修改商品规格',
                        content: $('#edit_good_sku').html(),
                        defineText: '提交',
                        render: function () {
                            $.ajax({
                                url: "/tao_order/get_order_good_spec",
                                type: "POST",
                                dataType: "JSON",
                                data: JSON.stringify(data),
                                contentType: 'application/json',
                                success: function (res) {
                                    // alert(JSON.stringify(res));
                                    console.log(res);
                                    if (res.code == 0) {
                                        render(res.data)
                                    } else {
                                        alert(res.msg)
                                    }
                                }
                            });
                        },
                        before: function () {
                            var data = {itemId: $this.attr('d_id'), newSpecId: $("#new_spec_id  option:selected").val()}
                            $.ajax({
                                url: "/tao_order/upd_order_tmall_spec",
                                type: "POST",
                                dataType: "JSON",
                                data: JSON.stringify(data),
                                contentType: 'application/json',
                                success: function (res) {
                                    if (res.code == 0) {
                                        alert("修改成功");
                                        location.reload();
                                    } else {
                                        Tips.alert("修改失败：" + res.msg);
                                    }
                                }
                            });
                            return false;
                        }
                    });

                    function render(data) {
                        var html = '<select id="new_spec_id">';
                        for (var i = 0, n = data.length; i < n; i++) {
                            html += '<option value="' + data[i].id + '">' + data[i].specNumber + ' ' + data[i].sizeValue + ' ' + data[i].colorValue + '</option>';
                        }
                        html += '</select>';
                        $('#new_good_sku').html(html);
                    }
                })


            });//jquery END
        });
    </script>

</div>


</body>
<html>
